<template>
  <div class="container">
    <div>
      <!-- <logo /> -->
      <h1 class="title">
        首页 {{a}}/{{b}}
      </h1>

      <h2>数据交互</h2>
      <h3>同域资源</h3>
      <div>{{title}}</div>

      <h3>跨域资源</h3>
      <div>{{msg}}</div>
    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  // SSR
  // middleware: 'auth',
  middleware(context) {
    console.log('middleware pages')
  },
  // 参数的有效性
  validate({params, query}) {
    // 校验业务
    console.log('validate')
    return true;
  },

  // 读取数据，返回给组件
  // asyncData(context) {
  //   // 异步业务逻辑，读取服务端数据
  //   console.log('asyncData')
  //   return {
  //     b: 2
  //   }
  // },
  async asyncData({$axios}) {
    const res = await $axios({url: '/data/list.json'})
    console.log('读取到的静态资源', res.data)
    // return {
    //   title: res.data.title
    // }

    // const res2 = await $axios({url: 'http://localhost/3001/api/home'})
    const res2 = await $axios({url: '/api/home'})
    console.log('读取跨域资源数据', res2.data)

    return {
      title: res.data.title,
      msg: res2.data.msg
    }
  },

  // async fetch({$axios}) {
  //   const res = await $axios({url: '/data/list.json'})
  //   console.log('res', res.data.title)
  //   // todo 添加到状态书中
  // },

  // // 读取数据
  // fetch({store}) {
  //   // 异步业务逻辑，读取服务端数据，提交给vuex
  //   console.log('fetch')
    
  // },

  // SSR & CSR
  beforeCreate() {
    console.log('beforeCreate')
  },

  created() {
    console.log('created')
  },

  // CSR 可以访问window this指向组件
  beforeMount() {
    console.log('beforeMount')
  },

  mounted() {
    console.log('mounted')
  },

  beforeUpdate() {
    console.log('beforeUpdate')
  },

  updated() {
    console.log('updated')
  },

  beforeDestroy() {
    console.log('beforeDestroy')
  },

  destroyed() {
    console.log('destroyed')
  },

  // 服务端渲染、激活、失活、不存在
  // activated() {},
  // deactivated() {},

  data() {
    return {
      a: 1
    }
  },

  components: {
    Logo
  }
  
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
